<template lang="html">
  <div>
    <!--    交卷-->
    <div class="card-header clearfix">
      <span class="submit-paper f-r">
        <el-button type="primary" round style="margin-right: 20px" @click="dialogTableVisible = true">答题卡</el-button>
        <el-button type="primary" round @click="submitPaper">交卷</el-button>
      </span>
    </div>

    <div class="card-content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ alert1List[questionId] }}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="nextQuestion">下一题</el-button>
        </div>
        <el-divider/>
        <div v-for="(Question,index) in currentQuestion">
          <!-- 单选 -->
          <div class="q-single" v-show="Question.questionType == 2 &&showList[questionId][index]===1">
            <div class="question">
              {{ index + 1 }}. {{ Question.questionstem }}
            </div>
            <div class="tip" :style="{'width':tipwidth}" v-if="Question.tip">
              <span>{{ Question.tip[0] }}</span>
              <span>{{ Question.tip[1] }}</span>
            </div>
              <el-radio-group class="answer22" v-model="answerList[questionId][index]"
                            v-for="(item,index2) in Question.choice">
              <el-radio :label="index2.toString()">
                {{ item }}
              </el-radio>
              </el-radio-group>
          </div>

          <!-- 填空 -->
          <div class="q-fill-in" v-show="Question.questionType == 1 &&showList[questionId][index]===1">
            <div class="question">
              {{ index + 1 }}.{{ Question.questionstem }}
            </div>
            <div class="answer">
              <div class="answer-item">
                <el-input
                    v-model="answerList[questionId][index]">
                </el-input>
              </div>
            </div>
          </div>

          <div class="q-fill-in" v-show="Question.questionType == 68">
            <div class="question">
              {{ index + 1 }}.{{ Question.questionstem }}
            </div>
            <div class="answer">
              <div class="answer-item">
                <el-input-number
                    :precision="1"
                    v-model="answerList[questionId][index]">
                </el-input-number>千米
              </div>
            </div>
          </div>

          <div class="q-fill-in" v-show="Question.questionType == 69">
            <div class="question">
              {{ index + 1 }}.{{ Question.questionstem }}
            </div>
            <div class="answer">
              <div class="answer-item">
                <el-input-number
                    v-model="answerList[questionId][index]">
                </el-input-number>次
              </div>
            </div>
          </div>

          <div class="q-fill-in" v-show="Question.questionType == 66 &&showList[questionId][index]===1">
            <div class="question">
              {{ index + 1 }}.{{ Question.questionstem }}
            </div>
            <div class="answer">
              <el-cascader
                  size="large"
                  :options="options"
                  v-model="answerList[questionId][index]"
                  filterable
                  clearable>
              </el-cascader>
            </div>
          </div>
        </div>

      </el-card>
    </div>


    <el-dialog
        title="答题卡"
        v-model="dialogTableVisible"
        width="50%"
    >
      <span style="padding: 10px" v-for="(item,index) in answerList">
        <el-button key="index" type="primary" v-if="checkIfAnswered(index)"
                   @click="clickAnswerCard(index)">{{ index + 1 }}
        </el-button>
        <el-button key="index+10" type="warning" v-else
                   @click="clickAnswerCard(index)">{{ index + 1 }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {question, alert1} from "./1";
import {ElMessage} from 'element-plus'
import {regionData} from 'element-china-area-data'
import {useRouter} from "vue-router";
import {checkAnswer, postAnswer} from "@/utils/api";

let arr = [];
for (let i = 0; i < question.length; i++) {
  arr[i] = new Array(question[i].length).fill(null);
}
let arr2 = [];
for (let i = 0; i < question.length; i++) {
  arr2[i] = new Array(question[i].length).fill(1);
}
export default {
  name: "HelloWorld",
  data() {
    return {
      router: useRouter(),
      options: regionData,
      dialogTableVisible: false,
      questionList: question,
      alert1List: alert1,
      showList: arr2,
      answerList: arr,
      questionId: 0,
    }
  },
  computed: {
    currentQuestion: function () {
      return this.questionList[this.questionId];
    },
    tipwidth:function (){
      const l = this.questionList[this.questionId][0].choice.length*75
      return l.toString()+'px'
    }
  },
  beforeCreate() {
    checkAnswer("test4", 9).then(res => {
      if (res.data.checked === 1) {
        this.router.push("/test1")
      }
    })
  },
  watch: {
    answerList: {
      deep: true,
      handler(newValue, oldValue) {
        // if (newValue[8][3] !== null && newValue[8][3].length !== 6) {
        //   this.answerList[8][3] = newValue[8][3][2];
        // }
        if (newValue[4][0] === '1') {
          for (let i = 1; i < this.showList[4].length; i++) {
            this.showList[4][i] = 0;
            this.answerList[4][i] = "-1";
          }
        }
        if (newValue[4][0] === '0') {
          for (let i = 1; i < this.showList[4].length; i++) {
            this.showList[4][i] = 1;
          }
        }
        if (newValue[5][0] === '1') {
          for (let i = 1; i < this.showList[5].length; i++) {
            this.showList[5][i] = 0;
            this.answerList[5][i] = "-1";
          }
        }
        if (newValue[5][0] === '0') {
          for (let i = 1; i < this.showList[5].length; i++) {
            this.showList[5][i] = 1;
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    checkIfAnswered(index) {
      let checked = true;
      for (let i = 0; i < this.answerList[index].length; i++) {
        if (this.answerList[index][i] === null) {
          checked = false;
          break
        }
      }
      return checked;
    },
    checkIfAllAnswered() {
      const list = this.answerList
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < list[i].length; j++) {
          if (list[i][j] === null) {
            return false
          }
        }
      }
      return true
    },
    submitPaper() {
      window.onblur = null;
      this.saveAnswer(false);
      if (!this.checkIfAllAnswered()) {
        ElMessage({
          message: '尚未完成答题',
          type: 'warning',
        })
        return
      }
      // 进入下一轮考试
      this.router.push("/test1")
    },
    clickAnswerCard(index) {
      ElMessage({
        message: '请按顺序完成题目',
        type: 'warning',
      });
      // this.saveAnswer(false);
      // this.questionId = index;
      // this.dialogTableVisible = false;
    },
    saveAnswer(type) {
      let arr = [];
      for (let i = 0; i < this.answerList[this.questionId].length; i++) {
        if (!this.answerList[this.questionId][i]){
          continue
        }
        arr.push({"token": "", "answer": this.answerList[this.questionId][i].toString(), "delta": 0})
      }
      postAnswer(arr, "test4", this.questionId)
    },
    nextQuestion() {
      if (!this.checkIfAnswered(this.questionId)) {
        ElMessage({
          message: '请完成本题',
          type: 'warning',
        });
        return
      }
      this.saveAnswer(true);
      if (this.questionList.length - 1 === this.questionId) {
        ElMessage({
          message: '这是最后一题啦，请点击右上方交卷按钮进入下一项测试',
          type: 'success',
        });
        return;
      }
      this.questionId += 1;
    }
  },
}
</script>

<style lang="css">

.card-header {
  padding: 10px;
  font-size: 20px;
  margin-top: 30px;
  margin-right: 100px;
  text-align: right;
}

.answer {
  padding: 10px;
}

.question {
  padding: 10px 0;
}

.card-content {
  width: 90%;
  margin: 40px auto 0;
}

.card-content .box-card {
  text-align: left;
  padding-left: 50px;
}

.el-button.stu-answer-item {
  margin: 10px;
  width: 60px;
  height: 60px
}
.answer22{
  width:80px;
}
.tip{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
</style>
